<template>
  <div class="app-container">
    <n-form
      ref="formRef"
      :model="model"
      label-placement="left"
      label-width="auto"
      require-mark-placement="right-hanging"
    >
      <n-form-item label="标题" path="title">
        <n-input v-model:value="model.title" />
      </n-form-item>
      <n-form-item label="内容" path="body">
        <n-input v-model:value="model.body" />
      </n-form-item>
      <div style="display: flex;">
        <n-button round type="primary" @click="handleValidateButtonClick">
          发送通知
        </n-button>
      </div>
    </n-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
const formRef = ref(null);
const model = ref({
  title: '锄禾日当午',
  body: '汗滴禾成土',
});

import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification';

async function handleValidateButtonClick(e) {
  e.preventDefault();
// 你有发送通知的权限吗？
  let permissionGranted = await isPermissionGranted();

// 如果没有，我们需要请求它
  if (!permissionGranted) {
    const permission = await requestPermission();
    permissionGranted = permission === 'granted';
  }

// 一旦获得许可，我们就可以发送通知
  if (permissionGranted) {
    sendNotification({
      title: model.value.title || '我是标题',
      body: model.value.body || '我是内容',
    });
  }
}
</script>
